<template>
  <div>
    <el-dialog
      title="新增"
      :visible.sync="dialogInfo"
      :modal-append-to-body="false"
      width="580px"
      @close="close"
      @opened="openedDialog"
    >
      <el-form :model="form">
        <el-form-item label="类型：" :label-width="formLabelWidth">
          <el-select v-model="form.category" placeholder="请选择分类">
            <el-option
              v-for="item in categoryData.item"
              :key="item.id"
              :label="item.category_name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标题：" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="概况：" :label-width="formLabelWidth">
          <el-input
            v-model="form.content"
            autocomplete="off"
            type="textarea"
            :rows="3"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="danger" @click="submitData" :loading="submitStar">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { reactive, ref, watch } from "@vue/composition-api";
import { addNews } from "@/network/api/news.js";
export default {
  name: "dialogInfo",
  props: {
    flag: {
      type: Boolean,
      default: false
    },
    category: {
      type: Array,
      default: () => {}
    }
  },

  setup(props, { emit, root, refs }) {
    //ref
    const dialogInfo = ref(false);
    const formLabelWidth = ref("60px");
    const submitStar = ref(false);

    //reactive
    const form = reactive({});

    const categoryData = reactive({
      item: []
    });

    //2.0的写法
    //   watch: {
    // flag: {
    //   handler(newValue) {
    //     this.dialogInfo = newValue;
    //   }
    // }

    //3.0的写法
    watch(() => (dialogInfo.value = props.flag));

    const close = () => {
      //通过修饰器进行修改，这种方式可以减轻代码，但是这种方式只能使用在没复杂逻辑的地方
      emit("update:flag", false);
      //   this.$emit("close", false);
      //重置表单
      resetData();
    };

    const openedDialog = () => {
      console.log(props.category);
      categoryData.item = props.category;
    };

    const resetData = () => {
      form.category = "";
      form.title = "";
      form.content = "";
    };

    const submitData = () => {
      if (!form.category) {
        return showToast("分类不能为空", "error");
      }
      if (!form.title) {
        return showToast("标题不能为空", "error");
      }
      if (!form.content) {
        return showToast("内容不能为空", "error");
      }
      let data = form;
      data.category = parseInt(data.category);
      submitStar.value = true;
      addNews(data)
        .then(result => {
          submitStar.value = false;
          showToast(result.data.message, "success");
          //重置表单
          resetData();
        })
        .catch(err => {
          console.log(err);
          submitStar.value = false;
        });
    };

    //封装提示
    const showToast = (data, type) => {
      root.$message({
        message: data,
        type: type
      });
    };

    return {
      dialogInfo,
      formLabelWidth,
      // 提交按钮的loadding状太
      submitStar,

      //reactive
      form,
      categoryData,

      //methds
      close,
      openedDialog,
      submitData
    };
  }
};
</script>

<style lang="scss" scoped></style>
